<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: rgb(243, 243, 243);
        }

        #box {
            width: 800px;
            height: 600px;
            /* background-color: rgb(149, 165, 245); */
            margin: 100px auto 0;
            position: relative;
        }

        #box>ul {
            width: 300px;
            height: 600px;
            /* position: relative; */
            /* background-color: rgb(255, 137, 243); */
        }

        #box>ul>li {
            width: 300px;
            height: 80px;
            background-color: rgb(47, 167, 49);
            padding: 0px 0 0px 20px;
            box-sizing: border-box;
            /* text-align: center; */
            line-height: 80px;
            font-size: 16px;
        }

        #box>ul>li:hover {
            background-color: rgb(243, 84, 84);
            cursor: pointer;
            color: rgb(114, 189, 255);
        }
        #box>ul>li>div {
            width: 0px;
            height: 560px;
            background-color: rgb(255, 255, 255);
            position: absolute;
            top: 0px;
            left: 300px;
            /* display: none; */
            /* max-width: 500px; */
        }

        #box>ul>li>div>div {
            width: 100px;
            height: 100px;
            background-color: rgb(206, 206, 206);
            /* border: 1px solid #000; */
            box-sizing: border-box;
            float: left;
            margin: 10px 0 0 20px;
            z-index: 2;
            position: relative;
            text-align: center;
            line-height: 100px;
            font-size: 16px;
            display: none;
        }

        #box>ul>li:first-child:hover>div {
            max-width: 500px;
            width: 500px;
            transition: all 1s;
        }
        #box>ul>li:first-child:hover>div>div {
            display: block;
            color: #000;
        }

        #box>ul>li:nth-child(2):hover>div {
            max-width: 500px;
            width: 500px;
            transition: all 1s;
        }

        #box>ul>li:nth-child(2):hover>div>div {
            display: block;color: rgb(157, 0, 255);
            background-color: rgb(5, 67, 46);
        }
        #box>ul>li:nth-child(3):hover>div {
            max-width: 500px;
            width: 500px;
            transition: all 1s;
        }

        #box>ul>li:nth-child(3):hover>div>div {
            display: block;color: rgb(104, 44, 153);
            background-color: rgb(77, 215, 56);
        }
        #box>ul>li:nth-child(4):hover>div {
            max-width: 500px;
            width: 500px;
            transition: all 1s;
        }

        #box>ul>li:nth-child(4):hover>div>div {
            display: block;color: rgb(29, 210, 255);
            background-color: rgb(205, 67, 85)
        }
        #box>ul>li:nth-child(5):hover>div {
            max-width: 500px;
            width: 500px;
            transition: all 1s;
        }

        #box>ul>li:nth-child(5):hover>div>div {
            display: block; color: rgb(68, 185, 74);
            background-color: aquamarine;
        }
        #box>ul>li:nth-child(6):hover>div {
            max-width: 500px;
            width: 500px;
            transition: all 1s;
        }

        #box>ul>li:nth-child(6):hover>div>div {
            display: block; color: rgb(172, 172, 236);
            background-color: rgb(39, 177, 131);
        }
        #box>ul>li:nth-child(7):hover>div {
            max-width: 500px;
            width: 500px;
            transition: all 1s;
        }

        #box>ul>li:nth-child(7):hover>div>div {
            display: block;
            color: blue;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li>手机 电视 家电
                <div>
                    <div>笔记本</div>
                    <div>平板</div>
                    <div>飞机</div>
                    <div>战斗火箭</div>
                    <div>爱因斯坦</div>
                </div>
            </li>
            <li>笔记本 平板 显示器
                <div>
                    <div>笔记本</div>
                    <div>平板</div>
                    <div>飞机</div>
                    <div>战斗火箭</div>
                    <div>爱因斯坦</div>
                </div>
            </li>

            <li>出行 穿戴<div>
                <div>笔记本</div>
                <div>平板</div>
                <div>飞机</div>
                <div>战斗火箭</div>
                <div>爱因斯坦</div>
            </div></li>
        
            <li>耳机 音响<div>
                <div>笔记本</div>
                <div>平板</div>
                <div>飞机</div>
                <div>战斗火箭</div>
                <div>爱因斯坦</div>
            </div></li>
            <li>健康 儿童<div>
                <div>笔记本</div>
                <div>平板</div>
                <div>飞机</div>
                <div>战斗火箭</div>
                <div>爱因斯坦</div>
            </div></li>

            <li>智能 路由器<div>
                <div>笔记本</div>
                <div>平板</div>
                <div>飞机</div>
                <div>战斗火箭</div>
                <div>爱因斯坦</div>
            </div></li>

            <li>电源 配件<div>
                <div>笔记本</div>
                <div>平板</div>
                <div>飞机</div>
                <div>战斗火箭</div>
                <div>爱因斯坦</div>
            </div></li>
        </ul>
    </div>
</body>

</html> 